import style from './style.module.scss'
import UnderlinedInputField from '../../../widgets/Forms/UnderlinedInputField'
import { Button, Checkbox, DatePicker, Input, Form, Switch } from 'antd'
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons'
import React from 'react'
import { UserRegister } from '../../../transfer/entities/User/Input'
import * as md5 from 'md5'
import { User } from '../../../transfer/entities/User'
import { useRecoilState } from 'recoil'
import { RegistedUser } from '../state'

interface IRegisterFormProps {
    onRegisterProcessing?: () => void
    onRegisterSuccess?: (userId: string) => void
    onRegisterFailed?: (message: string) => void
}

export function RegisterForm(props: IRegisterFormProps) {
    const [form] = Form.useForm()
    const [registedUser, setRegistedUser] = useRecoilState(RegistedUser)

    const beginRegisterProcessing = async (data: any) => {
        const res: any = await new User<UserRegister>({
            userName: data.username,
            phoneNum: data.phone,
            birthDate: new Date(data.birth.format('YYYY-MM-DD')),
            password: md5(data.password),
            email: data.email,
            allowedNotification: data.notification ?? false
        }).register()
        if (res.code === 201) {
            setRegistedUser({
                userId: res.data.id,
                email: res.data.email,
                userName: res.data.userName
            })
            if (props.onRegisterSuccess) props.onRegisterSuccess(res.data.id)
            return
        }
        if (props.onRegisterFailed) props.onRegisterFailed(res.message ? `注册失败：${res.message}` : '注册失败')
    }

    const onBtnRegisterClick = async () => {
        const values = await form.validateFields()
        if (props.onRegisterProcessing) props.onRegisterProcessing()
        await beginRegisterProcessing(values)
    }

    return (
        <Form form={form} className={style.container}>
            <h1>创建账户</h1>
            <span style={{ color: '#959595' }}>
                已有账户？<a href="#">登陆</a>
            </span>
            <div id={style.join}>
                <UnderlinedInputField
                    name="username"
                    rules={[{ required: true, message: '用户名不可以为空' }]}
                    placeholder="账户名称">
                    <Input bordered={false} />
                </UnderlinedInputField>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <UnderlinedInputField
                        name="phone"
                        rules={[{ required: true, message: '手机号码不能为空' }]}
                        placeholder="手机号码"
                        style={{ marginRight: 10 }}>
                        <Input bordered={false} />
                    </UnderlinedInputField>
                    <UnderlinedInputField
                        name="birth"
                        rules={[{ required: true, message: '出生日期不可为空' }]}
                        placeholder="出生日期"
                        style={{ marginLeft: 10 }}>
                        <DatePicker bordered={false} />
                    </UnderlinedInputField>
                </div>
                <UnderlinedInputField
                    name="password"
                    rules={[{ required: true, message: '密码不可为空' }]}
                    placeholder="密码">
                    <Input.Password
                        bordered={false}
                        iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
                    />
                </UnderlinedInputField>
                <UnderlinedInputField
                    name="email"
                    rules={[{ required: true, message: '邮件地址不可为空' }]}
                    placeholder="邮箱地址">
                    <Input bordered={false} />
                </UnderlinedInputField>
                <p style={{ fontSize: '12px', marginTop: '20px' }}>
                    我们向用户提供基于电子邮件地址的个性化服务，您可以随时通过 <a href="#">账户设置</a>{' '}
                    来开启或关闭推送服务。
                </p>
                <div>
                    <Form.Item name="notification" label="推送优惠信息&最新产品信息" valuePropName="checked">
                        <Switch style={{ display: 'flex', alignItems: 'center' }} />
                    </Form.Item>
                </div>
                <p style={{ fontSize: '12px', marginTop: '10px' }}>
                    点击"下一步"即代表你同意本公司的 <a href="#">隐私政策</a> 以及 <a href="#">使用条款</a>
                </p>
                <div style={{ marginTop: 40, display: 'flex', flexDirection: 'row-reverse' }}>
                    <Form.Item style={{ margin: 0 }}>
                        <Button type="primary" shape="round" onClick={onBtnRegisterClick}>
                            下一步
                        </Button>
                    </Form.Item>
                </div>
            </div>
        </Form>
    )
}
